<style type="text/css" rel="stylesheet">
    div.content_tab {
        display:none;
    }
    #tabbed_section {
       /* border: 2px solid gray;*/
        width: 100%; /* width of tabbed panel */
        height: 100%;
    }
    #menu {

        width: 100%;
        height: 8%;
    }
    #Display_content {

        min-height: 89%;
        padding: 5px;
        /*border: 1px solid gray;*/
    }
    #ul_tabs {

        padding: 0px;
        margin: 0px;
    }
    .lh {
        padding:5px;
        background-color: gray;
        list-style: none;
        width: 88px;
        height: 25px;
        float: left;
        /*border: 1px solid #FFFFFA;*/
        text-align:center;
    }
    li.lh:hover {
        background-color: white;
        cursor: pointer;
    }

</style>
<script type="text/javascript">

    var namee;
    function change(namee){
        document.getElementById("Display_content").innerHTML=document.getElementById(namee).innerHTML;

        //optional Javascript code below - To change color of clicked tab
        var livetab, i;
        switch(namee){
            case 'tab1':
                livetab='t1';
                break;
            case 'tab2':
                livetab='t2';
                break;
        }
        for(i=1;i<3;i++){
            document.getElementById("t"+i).style.backgroundColor="gray";
        }
        document.getElementById(livetab).style.backgroundColor="silver";

    }

</script>
<div class="ym-col3 ym-g80">
    <div class="ym-cbox-right">
        <div class="boxmaps">
            <div id="tabbed_section">
                <div id="menu">
                    <ul id="ul_tabs">
                        <li class="lh" id="t1" onClick="change('tab1')">
                            Agregar
                        </li>
                        <li class="lh" id="t2" onClick="change('tab2')">
                            Visualizar
                        </li>
                    </ul>
                </div>
                <div id="Display_content" onload="change('h1')"> </div>
                <div id="tab1" class="content_tab">
                    #{include 'GestionDataHistorica/GestorDataHistorica/Registros/AgregarRegistro.html' /}
                </div>
                <div id="tab2" class="content_tab">
                    #{include 'GestionDataHistorica/GestorDataHistorica/Registros/VisualizarRegistro.html' /}
                </div>
            </div>
        </div>
    </div>
</div>

